import React from "react";
import {Icon, NavBar} from "antd-mobile";
import { List, InputItem } from 'antd-mobile';
import { Button } from 'antd-mobile';
import {  Radio, Flex, WhiteSpace } from 'antd-mobile';
import "../../Style/fund.css";

const RadioItem = Radio.RadioItem;

export default class Fund_buy_pay extends React.Component{
    state = {
        value: 0,
        value2: 0,
        value3: 0,
        value4: 0,
    };
    onChange = (value) => {
        console.log('checkbox');
        this.setState({
            value,
        });
    };
    onChange2 = (value) => {
        console.log('checkbox');
        this.setState({
            value2: value,
        });
    };
    render() {
        const { value, value2, value3, value4 } = this.state;
        const data = [
            { value: 0, label: '用户绑定的银行卡1' },
            { value: 1, label: '用户绑定的银行卡2' },
            { value: 2, label: '用户绑定的银行卡3' },
            { value: 3, label: '用户绑定的银行卡4' },
            { value: 4, label: '用户绑定的银行卡5' },
        ];
        return (
            <div>
                <div>
                    <NavBar className="f_r_nav"
                            mode="light"
                            leftContent={[
                                <Icon type="left"/>,
                                "返回",
                            ]}
                            onLeftClick={() => {
                                this.props.history.push('/terran/fundbuy')
                            }}
                    >
                        请选择银行卡
                    </NavBar>
                </div>
                <div style={{width:'100%',height:'10px',marginTop:'50px',background:'rgb(245,245,247)'}}></div>
                <div style={{margin:'0 auto 0 20px',padding:'0'}}>
                    <List renderHeader={() => '请选择您要支付的银行卡'}>
                        {data.map(i => (
                            <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
                                {i.label}
                            </RadioItem>
                        ))}
                    </List>
                </div>
                <Button type={"primary"} className="botton_buy_fund"
                        onClick={() => {
                            window.location.href = '#/terran/fundbuy'
                        }}>
                    <p>确定</p>
                </Button>
            </div>
        );
    };
};